<template>  
  <view class="my-page">   
      <section class="user-info">  
        <image src="/static/touxiang.jpg" class="avatar" />  
        <view class="user-details">  
          <h2 class="username">{{ user.name }}</h2>  
          <view class="stats">  
            <view class="stat-item">  
              <span>发布:</span>  
              <span>{{ user.publications }}</span>  
            </view>  
            <span class="separator"> | </span>  
            <view class="stat-item">  
              <span>粉丝:</span>  
              <span>{{ user.followers }}</span>  
            </view>  
            <span class="separator"> | </span>  
            <view class="stat-item">  
              <span>关注:</span>  
              <span>{{ user.following }}</span>  
            </view>  
          </view>  
        </view>  
      </section>  
	  
	  
    <view class="menu-container">  
      <h2 class="menu-title">为您服务</h2>  
      <view class="menu-grid">  
        <view class="menu-item" @click="goToFavorites">  
          <image class="menu-icon" src="/static/Collection.png" />  
          <text>我的收藏</text>  
        </view>  

        <view class="menu-item" @click="goToSettings">  
          <image class="menu-icon" src="/static/Ride_records.png" />  
          <text>骑行记录</text>  
        </view>  

        <view class="menu-item" @click="goToProfile">  
          <image class="menu-icon" src="/static/Information.png" />  
          <text>个人信息</text>  
        </view>  

        <view class="menu-item" @click="goToFriends">  
          <image class="menu-icon" src="/static/friends.png" />  
          <text>我的好友</text>  
        </view>  

        <view class="menu-item" @click="goToBodyProfile">  
          <image class="menu-icon" src="/static/Body_profile.png" />  
          <text>身体档案</text>  
        </view>  

        <view class="menu-item" @click="goToActivities">  
          <image class="menu-icon" src="/static/My_ctivities.png" />  
          <text>我的活动</text>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      user: {  
        name: '张三',  
        following: 120,  
        followers: 300,  
        publications: 15,  
        avatar: 'https://via.placeholder.com/150'  
      }  
    };  
  },  
  methods: {  
    goToProfile() {  
      uni.navigateTo({ url: '/pages/mine/Information/Information' });  
    },  
    goToSettings() {  
      uni.navigateTo({ url: '/pages/mine/Ride_records/Ride_records' });  
    },  
    goToFavorites() {  
      uni.navigateTo({ url: '/pages/mine/Collection/Collection' });  
    },  
    goToActivities() {  
      uni.navigateTo({ url: '/pages/mine/My_ctivities/My_ctivities' });  
    },  
    goToFriends() {  
      uni.navigateTo({ url: '/pages/mine/Friends/Friends' });  
    },  
    goToBodyProfile() {  
      uni.navigateTo({ url: '/pages/mine/Body_profile/Body_profile' });  
    }  
  }  
};  
</script>  

<style scoped>  
.my-page {  
  padding: 5px;  
  text-align: left;  
  background-color: #ffffff;  
  height: 100vh;  
  display: flex;  
  flex-direction: column; /* 使用列方向布局 */  
}  

.user-info {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  margin-bottom: 20px;  
  background-color: #ffffff;  
  border-radius: 5px;  
  box-shadow: 0 4px 15px rgba(156, 156, 156, 0.2);  
  padding: 20rpx;  
}  

.avatar {  
  border-radius: 50%;  
  width: 80px;  
  height: 80px;  
  margin-right: 20px;  
}  

.user-details {  
  flex-grow: 1;  
  text-align: right;  
}  

.username {  
  margin: 0;  
}  

.stats {  
  margin-top: 5px;  
  font-size: 12px;  
  color: #666;  
  display: flex;  
  justify-content: flex-end;  
  align-items: center;  
}  

.stat-item {  
  margin-left: 10px;  
  text-align: center;  
}  

.separator {  
  margin: 0 5px;  
}  

.menu-container {  
    
  padding: 20rpx; 
  box-shadow: 0 4px 15px rgba(192, 192, 192, 0.2);
 
}  

.menu-title {  
  font-size: 18px;  
  margin-bottom: 10px;  
}  

.menu-grid {  
  display: grid;  
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */  
  gap: 10px; /* 项目之间的间距 */  
}  

.menu-item {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 10px;  
  border-radius: 5px;  
  background-color: #ffffff;  
}  

.menu-item:hover {  
  background-color: #e0e0e0;  
}  

.menu-icon {  
  width: 40px;  
  height: 40px;  
  margin-bottom: 5px;  
}  
</style>